@import './variable.scss';


.video-plate {
  width: 100%;
  height: calc(100% - #{px(30)});
  background-color: #000000;

  .video-body {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;

    .box-row {
      display: flex;
      flex-wrap: nowrap;
      width: 100%;
      z-index: 0;
    }

    .hiddenVideos {
      display: none;
    }

    .row-1 {
      height: 20%;
      width: 100%;
    }

    .row-3 {
      height: 60%;
      width: 100%;
    }

    .box-col-1 {
      width: 20%;
      height: 100%;
    }

    .box-col-3 {
      width: 60%;
      height: 100%;
    }

    .hiddenOthers {
      width: 100%;
      height: 100%;
    }

    .item-3 {
      height: 100%;
      width: 20%;

      .item-row-1 {
        padding: 1px;
        height: 33.3333333%;
        width: 100%;
      }
    }

    .video-item {
      height: 100%;
      width: 100%;
    }

    .video-item-mix {
      // height: calc(100% - 1px);
      width: calc(100% - #{px(1)});
    }

    .mix {
      border: px(1) solid #e0b784;
    }

    .item-row-1 {
      &.left {
        border-left: px(1) solid #666666;
        border-bottom: px(1) solid #666666;
      }

      &.top {
        border-top: px(1) solid #666666;
      }

      &.right {
        border-right: px(1) solid #666666;
        border-bottom: px(1) solid #666666;
        // border-left: 1px solid #666666;
      }
    }

    .box-col-1 {
      &.right,
      &.middle,
      &.left {
        border-left: px(1) solid #666666;
        border-bottom: px(1) solid #666666;
        border-right: px(1) solid #666666;
      }

      &.middle {
        border-left: px(1) solid #666666;
        border-bottom: px(1) solid #666666;
        border-right: px(1) solid #666666;
      }

      &.between {
        border-bottom: px(1) solid #666666;
      }
    }
  }

  .video-footer {
    display: flex;
    align-items: center;
    height: px(30);
    background-color: #000000;
    color: #ffffff;
    font-size: px(14);

    .svg-icon {
      width: px(15);
      height: px(15);
      margin-left: px(10);
    }
  }
}

